05. Navigating Xcode’s Interface

If you open an Xcode project, we can see that Xcode is divided into five main sections: the Navigator on the left, the Editor area in the middle of the screen, the Debug area at the bottom, the Utilities on the right, and the toolbar at the top.

The Navigator allows us to examine the different parts of our Xcode project. Currently, the Navigator displays the Project navigator. The Project navigator lets you see all files contained in a project. If you cannot see the Project navigator, make sure you have the Project navigator selected using the icons at the top of the Navigator (it's the file icon on the far left).

By using a keyboard shortcut (a special combination of keys), you can select the Project navigator. The keyboard shortcut to select the Project navigator is the Command key and the 1 key at the same time. It is abbreviated as ⌘1, ⌘+1, or Command+1 (they all mean the same thing). Also, if you click View in the top toolbar, and then go to Navigators, you can see the shortcut information listed for the Project navigator.

Before continuing, try bringing up the Project navigator with its keyboard shortcut!

With Project navigator selected, click the project name at the top to view the project's settings.

Once selected, the Editor area displays project settings. This view gives us the ability to change settings such as our app's supported devices, orientations, and operating systems. For instance, you could specify that this project should only run on iPhones with the latest version of iOS 9, and the only supported orientation is Portrait. The current settings should be fine for now, but take a minute to read through them in Xcode.

Now let’s take a closer look at one of the files in the project: ControlCenter.swift. To view this file, you may need to expand the project details by clicking the arrow to the left of the project name.

When you click on ControlCenter.swift, you’ll see the Editor area changes once again.

The Editor Area now shows the contents of ControlCenter.swift. This is actual Swift code.

Now, the purpose of this app is for you to guide a robot through a maze. The Swift code in this file acts like the brains of the robot: it controls where and when the robot moves. We'll get to writing some code in a minute, but for now, let's keep exploring Xcode.

Next, let's look at the Utilities. This area’s primary purpose is to allow you to view, access, and adjust various options based on what's currently shown in the editor.

In the above example, the Utilities currently shows options for the ControlCenter.swift file, since that's what was most recently selected. Here we can see where the file is stored on our computer or even change the file name, but we won’t touch any of these options for now.

If you are having trouble seeing any of the sections, then use the three buttons in the top-right corner of Xcode to show and hide the areas. The first button shows and hides the Navigator, the second button shows and hides the Debug Area (which we will talk about more in a bit), and the last button shows and hides the Utilities.

Take a minute to do the following:

• Toggle the show/hide button for the Navigator.
• Toggle the show/hide button for the Debug Area.
• Toggle the show/hide button for the Utilities.

We will end our brief tour of Xcode here. To learn more about the ins and outs of Xcode, you can search the Xcode Documentation by clicking Help → Xcode Overview. The resulting page covers what we've talked about in much more detail and is a great resource for getting started.